import React, { useCallback } from 'react'
import { connect } from 'umi';
import { Button } from 'antd';

import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import OrganizationSelect from '@/components/OrganizationSelect';

import BaseSettingProvider from '@/pages/SalaryManage/components/BaseSettingProvider';
import SalaryConfigTipPage from '@/pages/SalaryManage/components/SalaryConfigTipPage';
import {
    goToPersonalIncomeTaxLog
} from '@/pages/SalaryManage/utils/pageNavigateUtil';
import InsuranceFundFileMenuFilter
    from '@/pages/SalaryManage/SalaryCalculate/InsuranceFundFile/components/InsuranceFundFileMenuFilter';
import InsuranceFundFileRouter
    from '@/pages/SalaryManage/SalaryCalculate/InsuranceFundFile/components/InsuranceFundFileRouter';
import salaryStyle from '@/pages/SalaryManage/salaryManage.less';
import PersonalIncomeTax from './PersonalIncomeTax';

const Page = ({ selectOrganizationCode, dispatch, organizationResponse }) => {
    const handleOrganizationChange = useCallback(
        value => {
            if (selectOrganizationCode !== value) {
                dispatch({
                    type: 'insuranceFundFileModel/setMultiStore',
                    payload: {
                        selectOrganizationCode: value,
                        countryNameCode: null
                    }
                });
            }
        },
        [selectOrganizationCode]
    );

    return <PageHeaderWrapper type="success">
        <BaseSettingProvider organizationCode={selectOrganizationCode}>
            <InsuranceFundFileMenuFilter>
                <InsuranceFundFileRouter
                    type="insuranceFundFile"
                    extraButton={
                        <div style={{ display: 'flex', lineHeight: '31px' }}>
                            <div className={salaryStyle.mr12} style={{ display: 'flex' }}>
                                <OrganizationSelect
                                    isStrictly
                                    isNeedPermission
                                    style={{ width: 220 }}
                                    onChange={handleOrganizationChange}
                                    value={selectOrganizationCode}
                                    allowClear={false}
                                    dropdownMatchSelectWidth
                                    treeDataFromProp
                                    treeDataList={organizationResponse}
                            />
                            </div>
                            <Button onClick={() => goToPersonalIncomeTaxLog(selectOrganizationCode)}>
                                操作日志
                            </Button>
                        </div>
                }
            >
                    <SalaryConfigTipPage organizationCode={selectOrganizationCode}>
                        <div className={salaryStyle.salaryWrapper}>
                            <PersonalIncomeTax organizationCode={selectOrganizationCode}/>
                        </div>
                    </SalaryConfigTipPage>
                </InsuranceFundFileRouter>
            </InsuranceFundFileMenuFilter>
        </BaseSettingProvider>
    </PageHeaderWrapper>
};

export default connect(
    ({
        insuranceFundFileModel
    }) => ({
        selectOrganizationCode: insuranceFundFileModel.selectOrganizationCode,
        organizationResponse: insuranceFundFileModel.organizationResponse
    })
)(Page);
